<!--
 * @Author: 白印潇 bai_yinxiao@163.com
 * @Date: 2023-04-20 15:49:01
 * @LastEditors: 白印潇 bai_yinxiao@163.com
 * @LastEditTime: 2023-04-25 10:10:38
 * @FilePath: /shortRent-ui/src/views/system/otaAccount/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="custom_card_0">
    <el-table v-loading="loading" :data="list" stripe :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      border>
      <el-table-column label="OTA平台" align="center" prop="source">
      </el-table-column>
      <el-table-column label="账号" align="center">
        <template v-slot="{ row }">
          <el-input v-model="row.accountName" placeholder="请输入平台账号" size="small"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="密码" align="center">
        <template v-slot="{ row }">
          <el-input v-model="row.accountPassword" placeholder="请输入平台密码" size="small" ></el-input>
        </template>
      </el-table-column>
    </el-table>

    <div class="btnBox">
      <el-button type="primary" size="default" @click="save">保存</el-button>
    </div>

  </div>
</template>
<script>
import { getOTAccount, saveOTAccount } from "@/api/ota/ctrip";
export default {
  data() {
    return {
      loading: false,
      list: []
    }
  },
  async mounted() {
    this.list = await this.getAccountList();
  },

  methods: {
    // 获取ota账号
    getAccountList() {
      this.loading = true;
      // this.list = [];
      return new Promise((resolve) => {
        getOTAccount().then(res => {
          this.loading = false;
          resolve(res.rows);
        })
      })


    },
    // 保存账号
    save() {
      this.$confirm('确认保存OTA账号吗?', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
      }).then(() => {
        saveOTAccount(this.list).then(res => {
          if (res.code == 200) {
            this.getAccountList();
            this.$message({
              type: 'success',
              message: '保存成功'
            });
          }
        })
      })
    }
  },
}
</script>
<style lang="scss" scoped>
.btnBox {
  padding: 30px;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
